<template>
  <div class="container1">
    <div class="c1-childer1">
      <img class="c1-childer1-img" src="/static/images/shewai2.jpg" alt>
      <!-- <span>林科大涉外校园
        <div class="c1-childer1-web">www.shewai.com</div>
      </span>-->
    </div>

    <div class="c1-childer2">
      <!--<el-menu-->
      <!--:default-active="activeIndex2"-->
      <!--class="el-menu-demo"-->
      <!--mode="horizontal"-->
      <!--@select="handleSelect"-->
      <!--background-color="#353636"-->
      <!--text-color="#fff"-->
      <!--active-text-color="#ffd04b"-->
      <!--&gt;-->
      <!--<el-menu-item index="1">首页</el-menu-item>-->
      <!--<el-menu-item index="2">二手市场</el-menu-item>-->
      <!--<el-menu-item index="3">求购信息</el-menu-item>-->
      <!--<el-menu-item index="4">发布求购</el-menu-item>-->
      <!--&lt;!&ndash; <el-menu-item index="4">我的收藏</el-menu-item> &ndash;&gt;-->
      <!--<el-menu-item index="5">我的订单</el-menu-item>-->
      <!--<el-menu-item index="6">个人资料</el-menu-item>-->
      <!--</el-menu>-->
      <el-menu
        class="el-menu-demo"
        :default-active="this.$router.path"
        router
        mode="horizontal"
        background-color="#353636"
        text-color="#fff"
        active-text-color="#ffd04b"
        @select="handleSelect"
      >
        <el-menu-item v-for="(item,i) in navList" :key="i" :index="item.name">
          {{ item.navItem }}
        </el-menu-item>
      </el-menu>
    </div>
    <div class="c1-childer3">
      <input class="c1-childer3-input" type="text" placeholder="输入关键字...">
      <span class="c1-childer3-active">搜索</span>
    </div>

    <div class="c1-childer4">
      <span class="c1-childer4-ch1" @click="login()">登录</span>
      <span class="c1-childer4-ch2" @click="sign()">注册</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PageHeader',
  data () {
    return {
      activeIndex2: '1',
      navList: [
        {name: '/', navItem: '首页'},
        {name: '/campussecond', navItem: '二手商品'},
        {name: '/releasesgoods', navItem: '发布二手商品'},
        {name: '/campuswantbuy', navItem: '二手求购'},
        {name: '/releasewantbuy', navItem: '发布二手求购'},
        {name: '/person', navItem: '个人中心'}
      ]
    }
  },
  methods: {
    handleSelect (key, keyPath) {
      console.log(key, keyPath)
    },
    login () {
      this.$router.push({path: '/login'})
    },
    sign () {
      this.$router.push({path: '/registered'})
    }
  }
}
</script>

<style scoped>
  .container1 {
    /* height: 3.7rem; */
    display: flex;
    position: fixed;
    width: 100%;
  }
  .c1-childer1 {
    width: 13%;
    color: #ffffff;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #353636;
  }
  .c1-childer1-img {
    width: 11rem;
    height: 3rem;
    /* padding-right: 5px; */
    border-radius: 3px;
  }
  .c1-childer1-web {
    font-size: 10px;
  }
  .c1-childer2 {
    flex: 1;
    margin-bottom: -1px;
  }
  .c1-childer3 {
    width: 23%;
    background-color: #353636;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .c1-childer3-input {
    height: 40px;
    width: 200px;
    border: none;
    padding: 0 10px;
    font-size: 14px;
    margin-right: -3px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  .c1-childer3-active {
    line-height: 40px;
    background: #999999;
    font-size: 14px;
    color: #ffffff;
    padding: 0px 10px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
  .c1-childer4 {
    width: 10%;
    background-color: #353636;
    display: flex;
    padding: 0 20px;
    /* justify-content: center; */
    align-items: center;
    justify-content: space-around;
    color: #ffffff;
    font-size: 14px;
  }
</style>
